<template>
	<view class="member">
		<comm-header-com title="会员中心" ></comm-header-com>
		<view class="header-banner">
			<view class="user-vip-info">
				<image :src="user.avatar_url" class="user-img" mode=""></image>
				<view class="vip-info">
					<block v-if="user.grade=='normal'">
						<view>当前等级：普通用户</view>
						<view>暂未开通VIP</view>
					</block>
					<block v-if="user.grade=='vip'">
						<view>当前等级：VIP会员</view>
						<view >有效期至{{ user.vip_expired_day }}</view>
					</block>
					<!-- <block v-if="user.grade=='vip'&&!user.is_mentor">
						<view v-if="user.is_star" >当前等级：VIP-掌柜</view>
						<view v-else>当前等级：VIP会员</view>
						<view >有效期至{{ user.vip_expired_day }}</view>
					</block>
					<block v-if="user.grade=='vip'&&user.is_mentor">
						<view>当前等级：金牌掌柜</view>
						<view >有效期至{{ user.vip_expired_day }}</view>
					</block> -->
				</view>
			</view>
			<view class="vip-rotation">
				<swiper class="card-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="false" :circular="true"
				 :autoplay="false" interval="5000" duration="500" @change="cardSwiper" indicator-color="#8799a3" :current="cardCur"
				 indicator-active-color="#0081ff">
					<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
						<view class="swiper-item">
							<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
							<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
							<block v-if="index==0">
								<view class="card-title">VIP</view>
								<view class="card-tips" v-if="user.grade=='normal'">开通VIP享全网抄底价</view>
								<view class="card-tips" v-if="user.grade=='vip'">全网抄底价· 会员店</view>
								<!-- <view class="card-tips" v-if="user.grade=='vip'&&!user.is_star">召集{{ user.upgrade_needs_children }}位VIP伙伴升级掌柜</view>
								<view class="card-tips" v-if="(user.grade=='vip'&&user.is_star&&!user.is_mentor) || (user.grade=='vip'&&user.is_star&&user.is_mentor)">全网抄底价 会员店</view> -->
								<view class="card-operation-btn" @click="buyVip()">
									<image src="/static/images/buyvipnow.png" v-if="item.id==0&&user.grade=='normal'" mode="" ></image>
									<image src="/static/images/renewal.png" v-if="item.id==0&&user.grade=='vip'" mode=""></image>
								</view>
								<block v-if="user.grade!='normal'">
									<view class="vip_expired_day" v-if="user.is_vip_expired" >VIP省钱卡未续费</view>
									<view class="vip_expired_day" v-else >有效期至{{ user.vip_expired_day }}</view>
								</block>
								<view class="vip_expired_day" v-else>暂未开通VIP会员</view>
							</block>
							<block v-if="index==1">
								<!-- <view class="card-title">VIP-掌柜</view> -->
								<image src="/static/images/vip-title-icon.png"  class="card-title-icon" mode="heightFix"></image>
								<view class="card-tips card-tips-vip" v-if="user.grade=='normal'">开通VIP享全网抄底价，购物超便宜</view>
								<view class="card-tips card-tips-vip" v-if="user.grade=='vip'&&user.is_star&&user.is_mentor" >全网抄底价 会员店</view>
								<view class="card-tips card-tips-vip" v-if="user.grade!='normal'&&!user.is_star&&!user.is_mentor" >召集{{ user.upgrade_needs_children }}位VIP伙伴升级掌柜</view>
								<view class="card-tips card-tips-vip" v-if="user.grade!='normal'&&user.is_star&&!user.is_mentor" >召集 <text>{{ user.become_mentor_needs_stars }}位掌柜</text>升级金牌掌柜</view>
								<view class="card-operation-btn" @click="callFriend()" >
									<image src="/static/images/callednow.png" v-if="item.id==1" mode=""></image>
								</view>
								<block v-if="user.grade!='normal'&&!user.is_star">
									<view class="grow-up-value">掌柜成长值</view>
									<view class="grow-up-value-proportion"><text>{{ user.new_children_vips_for_my_upgrade }}</text><text>/{{ user.upgrade_needs_children }}</text></view>
									<progress :percent="user.new_children_vips_for_my_upgrade/user.upgrade_needs_children*100"
										stroke-width="3" active-color="#6F5DC1" class="progress"></progress>
									<view class="needed-vip-for-upgrade">还需{{ user.needed_children_vips_for_my_upgrade }}位VIP伙伴可升级</view>
								</block>
								<view class="vip_expired_day" v-if="user.grade=='normal'">暂未开通VIP会员</view>
								<view class="vip_expired_day" v-if="user.grade=='vip'&&user.is_star&&!user.is_vip_expire" >有效期至{{ user.vip_expired_day }}</view>
								<view class="vip_expired_day" v-if="user.grade=='vip'&&user.is_star&&user.is_vip_expire" >VIP省钱卡未续费</view>
							</block>
							<block v-if="index==2">
								<!-- <view class="card-title">VIP-掌柜</view> -->
								<image src="/static/images/svip-title-icon.png"  class="card-title-icon" mode="heightFix"></image>
								<view class="card-tips card-gold-tips-vip" v-if="user.grade=='normal'">开通VIP享全网超底价，购物超便宜</view>
								<view class="card-tips card-gold-tips-vip" v-if="user.grade=='vip'&&user.is_star&&!user.is_mentor" >召集 <text>{{ user.become_mentor_needs_stars }}位掌柜</text>升级金牌掌柜</view>
								<view class="card-tips card-gold-tips-vip" v-if="user.grade=='vip'&&user.is_star&&user.is_mentor" >全网抄底价 会员店</view>
								<view class="card-tips card-gold-tips-vip" v-if="user.grade=='vip'&&!user.is_star&&!user.is_mentor" >全网抄底价 会员店</view>
								<view class="card-operation-btn" @click="callFriend()" >
									<image src="/static/images/callfriendnow-svip.png" mode=""></image>
								</view>
								<block v-if="user.grade!='normal'&&user.is_star&&!user.is_mentor">
									<view class="grow-up-value grow-up-value-svip">VIP成长值</view>
									<view class="grow-up-value-proportion grow-up-value-proportion-svip"><text>{{ user.new_stars_for_my_mentor_progress }}</text><text>/{{ user.become_mentor_needs_stars }}</text></view>
									<progress :percent="(user.new_stars_for_my_mentor_progress/user.become_mentor_needs_stars)*100"
										stroke-width="3" active-color="#FFB466" backgroundColor="#474140" class="progress"></progress>
									<view class="needed-vip-for-upgrade needed-vip-for-upgrade-svip">还需 <text>{{ user.needed_children_stars_for_my_mentor_progress }}</text> 位掌柜伙伴可升金牌掌柜</view>
								</block>
								<view class="vip_expired_day vip_expired_day_svip" v-if="user.grade=='normal'">暂未开通VIP会员</view>
								<view class="vip_expired_day vip_expired_day_svip" v-if="user.grade=='vip'&&user.is_star&&user.is_mentor&&!user.is_vip_expire" >有效期至{{ user.vip_expired_day }}</view>
								<view class="vip_expired_day vip_expired_day_svip" v-if="user.grade=='vip'&&user.is_star&&user.is_mentor&&user.is_vip_expire" >VIP省钱卡未续费</view>
							</block>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<image src="/static/images/stepsbg.png" class="stepsbg" mode=""></image>
		</view>
		<view class="member-privilege">
			<view class="member-privilege-title">
				<view>会员特权</view>
				<!-- <view>享<text style="margin:0 10rpx;" v-if="cardCur==0">1</text><text style="margin:0 10rpx;" v-else-if="cardCur==1">2</text><text style="margin:0 10rpx;" v-else>3</text>项特权</view> -->
				<view>享<text style="margin:0 10rpx;" v-if="user.grade=='vip'">2</text><text style="margin:0 10rpx;" v-else>0</text>项特权</view>
			</view>
			
			<view class="member-privilege-item" :class="[user.grade=='normal'?'isgrayBg':'']" >
				<view class="member-privilege-item-icon">
					<image src="/static/images/goods-car.png" mode=""></image>
				</view>
				<view class="member-privilege-item-content">
					<!-- <view>购物领红包</view>
					<view>开通VIP省钱卡后购物可获得对应商品的自购商品红包，商品红包每月25日自动结算上个自然月的红包金额到余额，可用于购买商品使用。</view> -->
					<view>购物抄底价</view>
					<view :class="[user.grade=='normal'?'isgraycolor':'']">开通VIP省钱卡，购物享VIP会员价。</view>
				</view>
				<view class="member-privilege-mark" :class="[user.grade=='normal'?'isgrayLableBg':'']">权益1</view>
			</view>
			
			<view class="member-privilege-item" :class="[user.grade=='normal'?'isgrayBg':'']" >
				<view class="member-privilege-item-icon">
					<image src="/static/images/interests-money-gray-icon.png"  v-if="user.grade=='normal'" mode=""></image>
					<image src="/static/images/interests-money-icon.png" mode="" v-else></image>
					<!-- <image src="/static/images/privilege-icon.png" mode=""></image> -->
				</view>
				<view class="member-privilege-item-content">
					<!-- <view>免费云南双人游</view>
					<view :class="[cardCur==0?'isgraycolor':'']">升级掌柜可免费获赠价值4680元的云南（昆明、大理、丽江、玉龙雪山）6天5晚双人游及出行补贴。星级越高、出行补贴金额越高。</view> -->
					<view>领自购商品红包</view>
					<view :class="[user.grade=='normal'?'isgraycolor':'']">开通VIP省钱卡后购物可获得对应商品的自购商品红包，商品红包每月25日自动结算上个自然月的红包金额到余额，可用于购买商品使用。</view>
				</view>
				<view class="member-privilege-mark" :class="[user.grade=='normal'?'isgrayLableBg':'']">权益2</view>
				<!-- <view class="limit-lable-icon">限时活动</view>
				<view class="check-travel">
					<view>去查看</view>
					<image src="/static/images/rightmore.png" mode="" class="right-more"></image>
				</view> -->
			</view>
				
			<!-- <view class="member-privilege-item" :class="[cardCur==0||cardCur==1?'isgrayBg':'']">
				<view class="member-privilege-item-icon">
					<image src="/static/images/privilege-zero-icon.png" class="privilege-zero-icon" v-if="cardCur==2" mode=""></image>
					<image src="/static/images/privilege-zero-icon-gray.png" v-else class="privilege-zero-icon" mode=""></image>
				</view>
				<view class="member-privilege-item-content">
					<view>每月0元领</view>
					<view :class="[cardCur==0||cardCur==1?'isgraycolor':'']">金牌掌柜可享每月主推商品0元领体验权，可在每月0元领专区领取任意一款爆款商品免费体验。</view>
				</view>
				<view class="member-privilege-mark" :class="[cardCur==0||cardCur==1?'isgrayLableBg':'']">权益3</view>
			</view> -->
		</view>
		
		<!-- <image src="/static/images/buyviplogo.png" class="buyviplogo" mode=""></image> -->
		<!-- <view class="footer-bar" @click="buyVip()">
			<view class="footer-bar-left">
				<text>￥</text>
				<text>9.9</text>
				<text>/30天</text>
			</view>
			<view class="footer-bar-btn" v-if="user.grade == 'normal'" >立即开通</view>
			<view class="footer-bar-btn" v-if="user.grade == 'vip'">立即续费</view>
		</view> -->
		<!-- <down-load-app-com ></down-load-app-com> -->
	</view>
</template>

<script>
	import CommHeaderCom from "components/common/CommHeaderCom.vue"
	import CuCustom from "colorui/components/cu-custom"
	import store from 'store'
	import { mapGetters } from 'vuex'
	import AuthChecking from "mixins/AuthChecking"
	import CurrentUser from "mixins/CurrentUser"
	export default {
		components:{
			CommHeaderCom,
			CuCustom
		},
		store,
		mixins: [
			AuthChecking,
			CurrentUser
		],
		computed: {
			...mapGetters(['user'])
		},
		data() {
			return {
				cardCur: 0,
				swiperList: [
					{
						id: 0,
						type: 'image',
						url: '/static/images/normalbg.png',
					}
					// {
					// 	id: 1,
					// 	type: 'image',
					// 	url: '/static/images/vipbg.png'
					// }, 
					// {
					// 	id: 2,
					// 	type: 'image',
					// 	url: '/static/images/svipbg.png',
					// }
				],
				dotStyle: false,
				towerStart: 0,
				direction: '',
				privilegeList:[
					{
						"title":"购物领红包",
						"content":"开通VIP省钱卡后购物可获得对应商品的自购商品红包，商品红包每月25日自动结算上个自然月的红包金额到余额，可用于购买商品使用。"
					}
				]
			};
		},
		onLoad(options) {
			this.TowerSwiper('swiperList');
			// 初始化towerSwiper 传已有的数组名即可
			if(options.index!=undefined){
				this.cardCur = options.index
			}
		},
		methods: {
			buyVip(){
				uni.navigateTo({
					url:'/packs/pages/user/buyvip'
				})
			},
			callFriend(){
				uni.navigateTo({
					url:'/packs/pages/callFriend/callFriend'
				})
			},
			goTravel(){
				uni.navigateTo({
					url:'/packs/pages/travel/travel'
				})
			},
			DotStyle(e) {
				this.dotStyle = e.detail.value
			},
			// cardSwiper
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			// towerSwiper
			// 初始化towerSwiper
			TowerSwiper(name) {
				let list = this[name];
				for (let i = 0; i < list.length; i++) {
					list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
					list[i].mLeft = i - parseInt(list.length / 2)
				}
				this.swiperList = list
			},
		
			// towerSwiper触摸开始
			TowerStart(e) {
				this.towerStart = e.touches[0].pageX
			},
		
			// towerSwiper计算方向
			TowerMove(e) {
				this.direction = e.touches[0].pageX - this.towerStart > 0 ? 'right' : 'left'
			},
		
			// towerSwiper计算滚动
			TowerEnd(e) {
				let direction = this.direction;
				let list = this.swiperList;
				if (direction == 'right') {
					let mLeft = list[0].mLeft;
					let zIndex = list[0].zIndex;
					for (let i = 1; i < this.swiperList.length; i++) {
						this.swiperList[i - 1].mLeft = this.swiperList[i].mLeft
						this.swiperList[i - 1].zIndex = this.swiperList[i].zIndex
					}
					this.swiperList[list.length - 1].mLeft = mLeft;
					this.swiperList[list.length - 1].zIndex = zIndex;
				} else {
					let mLeft = list[list.length - 1].mLeft;
					let zIndex = list[list.length - 1].zIndex;
					for (let i = this.swiperList.length - 1; i > 0; i--) {
						this.swiperList[i].mLeft = this.swiperList[i - 1].mLeft
						this.swiperList[i].zIndex = this.swiperList[i - 1].zIndex
					}
					this.swiperList[0].mLeft = mLeft;
					this.swiperList[0].zIndex = zIndex;
				}
				this.direction = ""
				this.swiperList = this.swiperList
			},
		}
	}
</script>

<style scoped lang="scss">
	
	@import "/colorui/main.css";
	@import "/colorui/icon.css";
	page{
		width: 100%;
		height: 100%;
		overflow-y: auto;
		position: fixed;
		left:0;
		top:0;
	}
	.member{
		padding-bottom: 180rpx;
	}
	
	.header-banner{
		width: 750rpx;
		height: 642rpx;
		height: 652rpx;
		background: linear-gradient(180deg, #2C2C3B 0%, #474B61 100%);
		position: relative;
	}
	
	.user-vip-info{
		display: flex;
		align-items: center;
		padding-top:108rpx;
		padding-top:118rpx;
	}
	
	.user-img{
		display: block;
		width: 88rpx;
		height: 88rpx;
		border-radius: 50%;
		margin: 0 24rpx 0 32rpx;
	}
	.vip-info{
		>view:nth-child(1){
			font-size: 30rpx;
			font-weight: 500;
			color: #FFFFFF;
		}
		>view:nth-child(2){
			font-size: 28rpx;
			font-weight: 400;
			color: #999999;
		}
	}
	
	.vip-rotation{
		padding-top:42rpx;
		position: relative;
		z-index: 1;
	}
	
	.card-title{
		position: absolute;
		left:40rpx;
		top:30rpx;
		font-size: 48rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #3D210A;
		line-height: 66rpx;
	}
	.card-title-icon{
		display: block;
		// width: 96rpx!important;
		height: 46rpx!important;
		position: absolute;
		left:40rpx;
		top:42rpx;
	}
	
	.card-tips{
		font-size: 20rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #3D210A;
		line-height: 28rpx;
		position: absolute;
		left:40rpx;
		top:102rpx;
	}
	.card-tips-svip{
		color: #A5916A;
		>text{
			color: #FBDB9B;
		}
	}
	.card-tips-vip{
		letter-spacing: 2rpx;
		color: #56427D;
	}
	.card-gold-tips-vip{
		color: #FBDB9B;
	}
	
	.card-operation-btn{
		width: 210rpx;
		height: 64rpx;
		border-radius: 32rpx;
		position: absolute;
		bottom: 44rpx;
		right:48rpx;
		>image{
			display: block;
			width: 100%;
			height: 100%;
		}
	}
	.vip_expired_day{
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #3D210A;
		line-height: 34rpx;
		position: absolute;
		left:40rpx;
		bottom: 32rpx;
	}
	.vip_expired_day_svip{
		color: #FBDB9B;
	}
	.needed-vip-for-upgrade{
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #3D210A;
		line-height: 34rpx;
		position: absolute;
		left:40rpx;
		bottom:28rpx;
	}
	.needed-vip-for-upgrade-svip{
		color: #A5916A;
		>text{
			color: #FBDB9B;
			margin: 0 5rpx;
		}
	}
	.grow-up-value{
		font-size: 24rpx;
		font-weight: 400;
		color: #56427D;
		line-height: 34rpx;
		position: absolute;
		left:40rpx;
		bottom:136rpx;
	}
	.grow-up-value-svip{
		font-size: 24rpx;
		font-weight: 400;
		color: #A5916A;
		line-height: 34rpx;
	}
	.grow-up-value-proportion{
		display: flex;
		align-items: baseline;
		position: absolute;
		left:40rpx;
		bottom:86rpx;
		>text:nth-child(1){
			font-size: 36rpx;
			font-weight: 500;
			color: #56427D;
		}
		>text:nth-child(2){
			font-size: 24rpx;
			font-weight: 500;
			color: #56427D;
		}
	}
	.grow-up-value-proportion-svip{
		>text:nth-child(1){
			color: #FBDB9B;
		}
		>text:nth-child(2){
			color: #A5916A;
		}
	}
	.progress{
		width:316rpx;
		position: absolute;
		left:40rpx;
		bottom:78rpx;
	}
	.stepsbg{
		position: absolute;
		left:0;
		bottom:0rpx;
		width: 750rpx;
		height: 48rpx;
		z-index:0;
	}
	.member-privilege-title{
		font-size: 40rpx;
		font-weight: 600;
		color: #333333;
		line-height: 56rpx;
		margin: 42rpx 0 0 32rpx;
		display: flex;
		>view:nth-child(2){
			margin-left: 16rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #999999;
		}
	}
	
	.member-privilege-item{
		width: 686rpx;
		height: 290rpx;
		background: #FDF5EB;
		border-radius: 16rpx;
		padding: 36rpx 0;
		margin:20rpx auto 15rpx;
		position: relative;
		display: flex;
		align-items: center;
	}
	.member-privilege-item-icon{
		width: 88rpx;
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #FFFFFF;
		border-radius: 50%;
		// margin: 84rpx 36rpx 0 36rpx;
		margin: 0rpx 36rpx 0 36rpx;
		image{
			display: block;
			width: 48rpx;
			height: 48rpx;
		}
	}
	.member-privilege-item-content{
		width: 496rpx;
		>view:nth-child(1){
			font-size: 36rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #333333;
			line-height: 50rpx;
			margin-bottom: 8rpx;
		}
		>view:nth-child(2){
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #AF9881;
			line-height: 40rpx;
		}
		.isgraycolor{
			color:#A4A4A4!important;
		}
	}
	.member-privilege-mark{
		width: 108rpx;
		height: 44rpx;
		background: #F5DBBF;
		border-radius: 8rpx 0rpx 16rpx 0rpx;
		position: absolute;
		left:0;
		top:0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #613B23;
	}
	.member-privilege-mark-ssvip{
		width: 148rpx;
	}
	.limit-lable-icon{
		width: 80rpx;
		height: 28rpx;
		background: #FF6011;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 16rpx 16rpx 16rpx 0rpx;
		font-size: 16rpx;	
		font-weight: 600;
		color: #FFFFFF;
		position: absolute;
		left:412rpx;
		top:32rpx;
	}
	.right-more{
		display: block;
		width: 32rpx;
		height: 32rpx;
	}
	.check-travel{
		width: 116rpx;
		display: flex;
		align-items: center;
		position: absolute;
		right: 30rpx;
		top:46rpx;
		>view{
			font-size: 28rpx;
			font-weight: 400;
			color: #613B23;
		}
	}
	.isgrayBg{
		background: #EDEDED;
	}
	.isgrayLableBg{
		background: #CACACA;
		color:#5E5E5E;
	}
	
	.buyviplogo{
		display: block;
		width: 240rpx;
		height: 80rpx;
		margin:0 auto;
	}
	
	.footer-bar{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width:750rpx;
		height: 168rpx;
		background: url(../../../static/images/footerbg.png) no-repeat center;
		background-size: cover;
		position:fixed;
		left:0;
		bottom: 0;
		
	}
	
	.footer-bar-left{
		display: flex;
		align-items: baseline;
		height: 52rpx;
		margin-left: 32rpx;
		padding-bottom: 30rpx;
		>text:nth-child(1){
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #613208;
			line-height: 40rpx;
			background: linear-gradient(180deg, #F9CDAF 0%, #FCCFB0 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
		>text:nth-child(2){
			font-size: 52rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #613208;
			line-height: 74rpx;
			background: linear-gradient(180deg, #F9CDAF 0%, #FCCFB0 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
		>text:nth-child(3){
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #613208;
			line-height: 40rpx;
			background: linear-gradient(180deg, #F9CDAF 0%, #FCCFB0 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	}
	
	.footer-bar-btn{
		font-size: 40rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #3D210A;
		line-height: 56rpx;
		margin-right: 48rpx;
	}
	
	// 自定义轮播样式修改
	.card-swiper{
		height: 376rpx!important;
	}
	
	.card-swiper uni-swiper-item{
		width: 670rpx!important;
		padding:0!important;
		left:40rpx;
	}
	
	.card-swiper uni-swiper-item .swiper-item{
		transform:scaleX(0.95) scaleY(0.8);
	}
	
	.tower-swiper .tower-item {
		transform: scale(calc(0.5 + var(--index) / 10));
		margin-left: calc(var(--left) * 100upx - 150upx);
		z-index: var(--index);
	}
	
	
	
	
	
</style>
